<template>
  <div class="main-content-container">
    <div ref="search">
      <el-row type="flex" justify="space-between">
        <!-- <el-col>
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
          <el-form-item>
            <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn(custQuery)">搜索</el-button>
            <el-button type="text" @click="eliminate">清除</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
        <el-col :span="14" class="searchs-y">
          <el-form ref="searchs" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="searchBtn(custQuery)">
                <el-button slot="append" icon="el-icon-search" @click="searchBtn(custQuery)" />
              </el-input>
              <el-button v-if="false" type="text" style="line-height: 27px; margin-left:10px;" @click="eliminate">清除</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" class="spn buttons">
          <el-button type="primary" @click="addDataBtn">+ 办理住院</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" class="mounteds">
        <el-col :span="14">
          <Search :data=" [{name: '全部',id: 'all'},{name: '今天',id: 'today'},{name: '自定义',id: 'custom'}]" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
        </el-col>
      </el-row>
      <el-row class="mounteds">
        <Tabs v-model="status" :data="tabsName" @change="searchChange" />
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table :loading="loading" :data="pageDatas" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="customerSex" label="性别" :show-overflow-tooltip="true" />
        <el-table-column prop="bed" label="床位" :show-overflow-tooltip="true" />
        <el-table-column prop="projectName" label="所属项目" :show-overflow-tooltip="true" />
        <el-table-column prop="attendingDoctorName" label="主治医生" :show-overflow-tooltip="true" />
        <el-table-column prop="hospitalizationDay" label="住院天数" :show-overflow-tooltip="true" />
        <el-table-column prop="admissionTime" label="入院时间" :show-overflow-tooltip="true" />
        <el-table-column prop="dischargeTime" label="出院时间" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column prop="drawerName" label="办理人" :show-overflow-tooltip="true" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="row.status!=='已出院'" type="text" size="small" @click="editDataBtn(row)">修改</el-button>
            <el-button v-if="row.status!=='已出院'" type="text" size="small" @click="$refs.LeaveHospital.handleClose(row)">出院</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <!--新增住院-->
    <add-inpatient v-if="show" ref="addTriageRef" :show.sync="show" :visible.sync="visible" :title="title" :test-btn="testBtn" @success="getPageDatas()" />
    <LeaveHospital ref="LeaveHospital" @success="getPageDatas()" />
  </div>
</template>
<script>
import AddInpatient from "./addInpatient";
import LeaveHospital from "./leaveHospital";
import Search from '@/components/Search';
import Tabs from '@/components/SearchSelection';
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: { AddInpatient, Search, Tabs, LeaveHospital },
  data() {
    return {
      searchForm: {},
      tableColor,
      innerHeight: null,
      options: [],
      pageDatas: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      custQuery: '',
      addData: {}, // 添加数据
      selectData: {},
      flag: true,
      title: "",
      status: '全部',
      testBtn: "",
      visible: false,
      show: true,
      widths: 50,
      loading: false,
      search: {
        'status': '全部',
        'timeType': 'today',
        'createdTime': new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 00:00:00" + '_' + new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 23:59:59",
      },
      tabsName: [
        { id: '全部', name: "全部" },
        { id: '住院中', name: "住院中" },
        { id: '已出院', name: "已出院" },
      ],
    };
  },
  mounted() {
    this.getPageDatas();
    this.$nextTick(function() {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  methods: {
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getPageDatas();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getPageDatas();
    },
    eliminate() { // 点击顶部搜索处的清除文字
      this.params.page = 1;
      // this.search = {
      //   'status': '全部',
      //   'timeType': 'all',
      //   'createdTime': '_',
      //   // 'createdTime': new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 00:00:00" + '_' + new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 23:59:59",
      // };
      this.custQuery = "";
      // console.log(this.params, this.custQuery, this.search, "查询参数1111");
      this.getPageDatas();
    },
    searchChange(e) { // Tabs切换的方法函数
      Object.assign(this.search, { 'status': e === '全部' ? undefined : e });
      this.getPageDatas();
    },
    async getPageDatas() {
      this.loading = true;
      // console.log(this.params, this.custQuery, this.search, "查询参数");
      Object.assign(this.search, { 'status': this.search.status === '全部' ? undefined : this.search.status });
      const res = await this.$api['department/inpatient/page']({ ...this.params, custQuery: this.custQuery, query: this.search });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询住院管理列表失败！');
      this.pageDatas = res.data.result;
      this.total = res.data.total;
      // this.$message.success('查询住院管理列表成功！');
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getPageDatas();
    },
    // 添加
    addDataBtn() {
      this.show = true;
      this.flag = true;
      this.visible = true;
      this.$refs.addTriageRef.addBtn('');
    },
    // 编辑
    editDataBtn(row) {
      this.show = true;
      this.flag = true;
      this.visible = true;
      this.$refs.addTriageRef.addBtn(JSON.parse(JSON.stringify(row.id)));
    },
    // 搜索
    searchBtn(e) {
      this.custQuery = e;
      this.params.page = 1;
      this.getPageDatas();
    },
  },
};
</script>
<style lang="scss" scoped>
.mounteds{
  margin: 0 0 10px 0;
}
.buttons .el-button{
  float: right;
  margin-top: 10px;
}
</style>
